- dashboard = local_assigns[:dashboard]
- custom_dom_id = dom_id(milestone.try(:milestone) ? milestone.milestone : milestone)
- milestone_type = milestone.group_milestone? ? s_('Milestones|Group Milestone') : s_('Milestones|Project Milestone')

%li{ class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: custom_dom_id }
  .row
    .col-md-6
      .gl-mb-2
        %strong{ data: { qa_selector: "milestone_link", qa_milestone_title: milestone.title } }
          = link_to truncate(milestone.title, length: 100), milestone_path(milestone)
        - if @group || dashboard
          = " - #{milestone_type}"

      - if milestone.due_date || milestone.start_date
        .text-tertiary.gl-mb-2
          = milestone_date_range(milestone)
      - recent_releases, total_count, more_count = recent_releases_with_counts(milestone, current_user)
      - unless total_count == 0
        .text-tertiary.gl-mb-2.milestone-release-links
          = sprite_icon("rocket", size: 12)
          = n_('Release', 'Releases', total_count)
          - recent_releases.each do |release|
            = link_to release.name, project_releases_path(release.project, anchor: release.tag)
            - unless release == recent_releases.last
              &bull;
          - if total_count > recent_releases.count
            &bull;
            - more_text = n_('%{count} more release', '%{count} more releases', more_count) % { count: more_count }
            - if milestone.project_milestone?
              = link_to more_text, project_releases_path(milestone.project)
            - else
              = more_text
      %div
        = render('shared/milestone_expired', milestone: milestone)
        - if milestone.group_milestone?
          = gl_badge_tag milestone.group.full_name, { variant: :info }, { class: 'gl-white-space-normal gl-text-left' }
        - if milestone.project_milestone?
          = gl_badge_tag milestone.project.full_name, { variant: :muted }, { class: 'gl-white-space-normal gl-text-left' }

    .col-md-4.milestone-progress
      = milestone_progress_bar(milestone)
      = link_to pluralize(milestone.total_issues_count, _('Issue')), issues_path
      - if milestone.merge_requests_enabled?
        &middot;
        = link_to pluralize(milestone.total_merge_requests_count, _('Merge request')), merge_requests_path
      .float-lg-right.light
        = format(s_('Milestone|%{percentage}%{percent} complete'), percentage: milestone.percent_complete, percent: '%')
    .col-md-2
      .milestone-actions.d-flex.justify-content-sm-start.justify-content-md-end
        - if @project # if in milestones list on project level
          - if can_admin_group_milestones?
            = render Pajamas::ButtonComponent.new(icon: 'level-up', category: :tertiary, size: :small, button_options: { class: 'js-promote-project-milestone-button', title: s_('Milestones|Promote to Group Milestone'), disabled: true, data: { toggle: 'tooltip', container: 'body', url: promote_project_milestone_path(milestone.project, milestone), milestone_title: milestone.title, group_name: @project.group.name } })
        - if can?(current_user, :admin_milestone, milestone)
          - if milestone.closed?
            = link_button_to s_('Milestones|Reopen Milestone'), milestone_path(milestone, milestone: { state_event: :activate }), method: :put, class: 'gl-ml-3', size: :small
          - else
            = link_button_to s_('Milestones|Close Milestone'), milestone_path(milestone, milestone: { state_event: :close }), method: :put, class: 'gl-ml-3', category: :secondary, size: :small
